@charset "utf-8";

body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

.web{
    width: 100%;
    height: 100%;
    position: relative;
    .bg_white{
        width: 100%;
        height: 512px;
        background-image: url(../img/bg_day.png);
        position: absolute;
    }
    .bg_land{
        width: 100%;
        height:30vh;
        background-image: url(../img/land.png);
//      background-repeat: no-repeat;
        position: absolute;
        overflow: hidden;
        top: 512px;
        left: 0;
    }
    .bird{
    width: 48px;
    height: 48px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 45%;
    background-image: url(../img/bird0_3.png);
    animation: bird_ani .5s infinite steps(4,end);
    
        
    }
    @keyframes bird_ani{
        from{
            background-position: 0% 0%;
        }
        to{
            background-position: -400% 0%;
        }
    }
    
    .pipe_top{
        position: absolute;
        top: 0;
        width: 50px;
        background-image: url(../img/pipe_down.png);
        background-repeat: no-repeat;
        background-position: bottom;
        left:70%;
        left:1000px;
    }
    .pipe_bottom{
        position: absolute;
        width: 50px;
        background-image: url(../img/pipe_up.png);
        background-repeat: no-repeat;
        background-position: top;
        left:1000px;
        
    }
    p{
        font-size: 42px;
        color: deeppink;
        position: absolute;
        top: 80px;
        left: 47%;
    }
    
    
}
